<template>
  <el-dialog
    v-bind="$attrs"
    :visible.sync="visible"
    :before-close="beforeClose"
  >
    <TablePaging
      :table-list="formData"
      border
      size="mini"
      :table-column="deviceTableColumn"
      :table-btn-width="180"
      :table-paging="deviceTablePaging"
      :table-total="deviceTableTotal"
      @pagingChange="handlePaginChange"
    />
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="beforeClose">
        关闭
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import TablePaging from '@/components/TablePaging'
import { receiverTableColumn } from './config'
import { receiverFindPage } from '@/api/basiness'

export default {
  name: 'DeviceUpdate',
  components: { TablePaging },
  props: {
    deviceCodeDisabled: {
      type: Boolean,
      default: false
    },
    // formData: {
    //   type: Array,
    //   default: () => ([])
    // },
    beforeClose: {
      type: Function,
      default: () => {}
    },
    receiveKeyId: {
      type: Number,
      default: 0
    },
    receiveType: {
      type: Number,
      default: 1
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: [], // 表格中数据
      deviceTableColumn: receiverTableColumn(1, 10),
      deviceTableTotal: 0,
      deviceTablePaging: {
        page: 1,
        pagesize: 10
      },
      renderFormItem: [],
      formButtons: {
        isDialog: true,
        submitName: '提交',
        resetName: '取消',
        submitCallback: values => this.handleSubmit(values),
        resetCallback: () => this.$emit('update:visible', false)
      }
    }
  },
  watch: {
    // 弹窗显示的时候，发送请求
    visible(newValue, old) {
      if (newValue) {
        this.postFindPage(this.receiveKeyId, this.receiveType)
      }
    }
    // deviceCodeDisabled: {
    //   handler: function() {
    //     this.renderFormItem = updateFormItem(this.deviceCodeDisabled)
    //   },
    //   immediate: true
    // }
  },
  methods: {
    postFindPage(id, type) {
      receiverFindPage({
        ...this.deviceTablePaging,
        receiveKeyId: id,
        receiveType: type
      }).then(res => {
        const { records, current, size, total } = res
        this.formData = records
        this.deviceTablePaging = {
          page: current,
          pagesize: size
        }
        this.deviceTableTotal = total
      })
    },
    handlePaginChange(pageInfo) {
      // 分页改变
      this.deviceTablePaging = pageInfo
      this.postFindPage(this.receiveKeyId, this.receiveType)
      const { page, pagesize } = pageInfo
      this.deviceTableColumn = receiverTableColumn(page, pagesize)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__header {
  border-bottom: 1px solid #eaeaea;
}
</style>
